<template>
	<view class="page">
		<view class="top-navi">
			<view class="togather">
				<uni-icons type="heart-filled" color='#0022AB' size="20"></uni-icons>
				<text>拼单</text>
			</view>
			<view class="fake-search">
				<uni-icons type="search" color="#999999" size="15"></uni-icons>
				<text>{{sugguest_today}}</text>
			</view>
			<view class="hidden"></view>
		</view>
		<view class="coffee-get">
			<AddressSelector @storeSelected="getMenuByStoreId"></AddressSelector>
			<!-- 还有其他的逻辑可能要单独成为一个组件 -->
			<LuckySwitcher v-model:currentId="getWay">
				<LuckySwitcherItem id="get" label="自提"></LuckySwitcherItem>
				<LuckySwitcherItem id="send" label="配送"></LuckySwitcherItem>
			</LuckySwitcher>
		</view>
		<!-- todo:可折叠功能，应该是折叠面板搭配可以纵向滚动通知内容notice-bar -->
		<view class="top-navi-notice">
			<uni-notice-bar showIcon single background-color="#F4F7FC" color="#183DF2" text="新的美式上线了,快来买吧"> </uni-notice-bar>
		</view>
		
		<!-- 
			商品分类
			todo:tab 自己做组件，要可以左右滑动内容切换标签
		 -->
		<view class="goods-tab">
			<uni-segmented-control 
				:current="currentTab" 
				:values="tabLabels" 
				@clickItem="tabClick" 
				styleType="text" 
				activeColor="#002BBE">
			</uni-segmented-control>
		</view>
		<view class="menu-goods" v-show="currentTab === 0">
			<MenuGroup 
				ref="menuGroup"
				:dataList="menuData.groups"
				@change="hanleMenuGroupChange" >
			</MenuGroup>
			<MenuContent
				ref="menuContent" 
				:dataList="menuData.goodList" 
				@focusCardChange="handleGoodCardChange" 
				@scroll="handleGoodScroll" >
			</MenuContent>
			<LuckyShoppingCart ref="shoppingCart" @popup="cartDetailShow = !cartDetailShow "></LuckyShoppingCart>
			<LuckyShoppingCartDetail v-model:show="cartDetailShow"></LuckyShoppingCartDetail>
		</view>
	</view>
</template>

<script setup>
	import {ref,onMounted} from 'vue'
	import AddressSelector from './AddressSelector';
	import MenuGroup from './MenuGroup.vue';
	import MenuContent from './MenuContent.vue';
	import { randomStr } from '@/common';
	
	
	const getWay = ref('get')
	
	/**
	 * todo:自己封装一个，生态真的差劲啊
	 * 商品分类
	 */
	const currentTab = ref(0)
	const tabLabels = ref(['菜单','新人','本店推荐'])
	function tabClick(e) {
		currentTab.value = e.currentIndex
	}

	/**
	 * 根据门店id获取门店菜单数据
	 * 菜单联动
	 */
	const menuData = ref({ groups:[], goodList:[] })
	const menuGroup = ref(null)
	const menuContent = ref(null)
	function getMenuByStoreId(stroeId){
		// 临时替代后端接口
		const groups = []
		const goodList = []
		for(let i = 0; i < 20; i++){
			groups.push({
				id: 'a' + randomStr(null,i),
				name:"分组" + randomStr(4),
				icon:"search",
				msg: Math.random() * 10 > 5 ? "超大杯":null
			})
			goodList.push({
				id: 'a' + randomStr(null,i),
				title:"牛逼的咖啡" + randomStr(4),
				discription:"我是描述信息，出牛逼",
				goods:[
					{id:randomStr(),name:'商品名称',originPrice:33,price:9.9,img2:null,description:'0糖，好喝',isSignBoard:false},
					{id:randomStr(),name:'商品名称',originPrice:33,price:9.9,img2:null,description:'0糖，好喝',isSignBoard:false},
					{id:randomStr(),name:'商品名称',originPrice:33,price:9.9,img2:null,description:'0糖，好喝',isSignBoard:false},
					{id:randomStr(),name:'商品名称',originPrice:33,price:9.9,img2:null,description:'0糖，好喝',isSignBoard:false},
					{id:randomStr(),name:'商品名称',originPrice:33,price:9.9,img2:null,description:'0糖，好喝',isSignBoard:false},
					{id:randomStr(),name:'商品名称',originPrice:33,price:9.9,img2:null,description:'0糖，好喝',isSignBoard:false},
					{id:randomStr(),name:'商品名称',originPrice:33,price:9.9,img2:null,description:'0糖，好喝',isSignBoard:false},
				]
			})
		}
		menuData.value = {groups,goodList}
	}
	function hanleMenuGroupChange(id){
		menuContent.value.scrollTo(id)
	}
	function handleGoodCardChange(id){
		menuGroup.value.setActiveMenu(id)
	}

	/**
	 * 购物车 
	 */
	const cartDetailShow = ref(false)
	const shoppingCart = ref(null)
	// todo：有没有类似节流的机制
	function handleGoodScroll(){
		shoppingCart.value.fold()
	}

	
	const sugguest_today = ref('橙子美式')
	
</script>

<style lang="less" scoped>
	.flex-center {
		display:flex;
		justify-content: center;
		align-items: center;
	}
	
	.page {
		.top-navi {
			padding:20rpx;
			background-color: #FFFFFF;
			display:flex;
			justify-content: flex-start;
			align-items: center;
			.togather {
				border:1rpx solid #CCCCCC;
				display:flex;
				justify-content: center;
				align-items: center;
				font-size:30rpx;
				width:160rpx;
				height:60rpx;
				border-radius:30rpx;
				.uni-icons {
					margin-right:10rpx;
				}
			}
			.fake-search {
				background-color: #F6F6F6;
				color:#999999;
				width:380rpx;
				height:60rpx;
				border-radius: 30rpx;
				box-sizing: border-box;
				font-size:25rpx;
				margin:0 20rpx;
				display:flex;
				align-items:center;	
				.uni-icons {
					margin-left:15rpx;
				}
				text {
					margin-left:10rpx ;
				}
				
			}
			.hidden {
				width:40rpx;
				background-color: green;
			}
		}
	    
		.coffee-get {
			background-color: #FFFFFF;
			padding:0 15rpx 10rpx;
			display:flex;
			justify-content: space-between;
		}
		
		.top-navi-notice {
			padding:0 30rpx;
			background-color: #FFFFFF;
			::v-deep .uni-noticebar {
				padding:5rpx;
				border-radius:7rpx;
				margin-bottom:0rpx;
			}
			::v-deep .uni-noticebar__content-text {
				font-size:25rpx !important;
			}
		}
		
		.goods-tab {
			background-color: #FFFFFF;
			margin-bottom:15rpx;
		}

		.menu-goods {
			display:flex;


		}
	}
	       
</style>
